<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top">
            <el-row>
                <el-col :span="12">
                    <span>{{ goods.name }}</span>
                </el-col>
                <el-col :span="12" style="text-align: right">
                    <el-button icon="el-icon-plus" type="success" circle size="mini" @click="showSave()"></el-button>
                    <el-button icon="el-icon-back" type="default" circle size="mini" @click="back"></el-button>
                    <el-button icon="el-icon-delete" type="danger" size="mini" @click="batchRemove">批量</el-button>
                </el-col>
            </el-row>
        </div>

        <el-table :data="data.data" border stripe highlight-current-row style="width: 100%" size="mini">
            <el-table-column type="index" header-align="center" align="center" width="60px"/>
            <el-table-column prop="depotNo" label="库存编码" header-align="center" align="center"/>
            <el-table-column prop="unitPrice" label="单价" header-align="center" align="center"/>
            <el-table-column prop="weight" label="重量" header-align="center" align="center"/>
            <el-table-column prop="price" label="售价" header-align="center" align="center"/>
            <el-table-column prop="cartCount" label="购物车添加次数" header-align="center" align="center"/>
            <el-table-column prop="cartTime" label="最后一次添加时间" header-align="center" align="center" :formatter="formatterDate"/>
            <el-table-column prop="action" fixed="right" label="操作" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="remove(scope.row.id)" style="color: red">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="content_bottom" style="text-align: center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                           :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
        <el-dialog title="增加库存" :visible.sync="dialogVisible" width="30%" append-to-body>
            <div>
                <el-form ref="form" :model="form" :rules="rules" label-width="95px" size="mini">
                    <!--<el-form-item label="库存编码：" prop="depotNo">-->
                        <!--<el-input v-model="form.depotNo" style="width: 305px;"></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label="单价：" prop="unitPrice">
                        <el-input-number v-model="form.unitPrice" :min="0" :precision="2" style="width: 305px;"></el-input-number>
                        <span class="lable-remark"> 元/500克</span>
                    </el-form-item>
                    <el-form-item label="重量：" prop="weight">
                        <el-input-number v-model="form.weight" :min="0" :precision="2" style="width: 305px;"></el-input-number>
                        <span class="lable-remark">克</span>
                    </el-form-item>
                    <el-form-item label="售价：" prop="price">
                        <el-input-number v-model="form.price" :min="0" :precision="2" style="width: 305px;"></el-input-number>
                    </el-form-item>
                    <el-form-item label="入库数：" prop="count">
                        <el-input-number v-model="form.count" :min="1" style="width: 305px;"></el-input-number>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import {depotList, addDepot, removeDepot, batchRemoveDepot} from '@/api/goods/goods-depot'
    import { formatDate } from '@/utils/date-utils'

    export default {
        name: 'GoodsDepot',
        data() {
            return {
                loading: false,
                dialogVisible: false,
                goods: {
                    id: null,
                    name: "",
                },
                condition: {
                    currentPage: 1,
                    pageSize: 30
                },
                data: {},
                form: {
                    depotNo: null,
                    unitPrice: 0,
                    weight: 0,
                    price: 0,
                    count: 1
                },
                rules: {
                    depotNo: [
                        {required: true, message: '库存编码不能为空', trigger: 'blur'},
                        {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                    ],
                    unitPrice: [
                        {required: true, message: '请输入单价', trigger: 'blur'},
                    ],
                    weight: [
                        {required: true, message: '请输入重量', trigger: 'blur'},
                    ],
                    price: [
                        {required: true, message: '请输入售价', trigger: 'blur'},
                    ],
                    count: [
                        {required: true, message: '请输入入库数', trigger: 'blur'},
                    ]
                }
            }
        },
        mounted() {
            this.goods = JSON.parse(window.sessionStorage.getItem("goods"))
            this.form.unitPrice = this.goods.unitPrice
            this.form.weight = this.goods.weight
            this.form.price = this.goods.price
            this.loadList()
        },
        methods: {
            formatterDate(row, column) {
                let date = new Date(row.cartTime * 1000);
                return formatDate(date, 'yyyy-MM-dd HH:mm:ss')
            },
            handleSizeChange(val) {
                this.condition.pageSize = val
                this.loadList()
            },
            handleCurrentChange(val) {
                this.condition.currentPage = val
                this.loadList()
            },
            async loadList() {
                this.loading = true
                let res = await depotList(this.goods.id, this.condition)
                this.loading = false
                if (res.code !== "0") return
                this.data = res
            },
            back() {
                this.$router.back()
            },
            showSave() {
                this.dialogVisible = true
            },
            onSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.save()
                    } else {
                        return false;
                    }
                });
            },
            async save() {
                this.loading = true;
                let res = await addDepot(this.goods.id, this.form)
                this.loading = false
                if (res.code !== '0') {
                    return this.$notify.error({title: '消息', message: res.message})
                }
                this.dialogVisible = false
                this.$notify({title: '消息', message: '保存成功', type: 'success'});
                this.$refs.form.resetFields();
                this.loadList()
            },
            remove(id) {
                this.$confirm('此操作将永久删除该库存, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.removeIng(id);
                });
            },
            batchRemove() {
                this.$confirm('此操作将永久删除商品得所有库存, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.batchRemoveIng();
                });
            },
            async removeIng(id) {
                this.loading = true;
                let res = await removeDepot(id);
                this.loading = false
                if (res.code !== '0') {
                    this.$message.warning(res.message)
                    return
                }
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.loadList()
            },
            async batchRemoveIng() {
                this.loading = true;
                let res = await batchRemoveDepot(this.goods.id);
                this.loading = false
                if (res.code !== '0') {
                    this.$message.warning(res.message)
                    return
                }
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.loadList()
            },
        }
    }
</script>

<style scoped>
    .lable-remark {
        font-size: 10px;
        color: red;
        padding-left: 10px;
    }
</style>